<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" @click="changecolor(index)" :class="item.flag ? 'color' : ''">{{ item.name
            }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                id: 1, name: '毒鸡汤', flag: false
            }, {
                id: 2, name: '一句诗词', flag: true
            }, {
                id: 3, name: '励志句子', flag: false
            }]
        }
    },
    methods: {
        changecolor(index) {
            this.list.map(item => item.flag = false);
            this.list[index].flag = !this.list[index].flag;
            if (index == 0) {
                this.$router.push({
                    path: '/aa'
                })
            } else if (index == 1) {
                this.$router.push({
                    path: '/poetry'
                })
            }else{
                this.$router.push({
                    path: '/bb'
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
ul {
    background-color: #222;

    li {
        list-style: none;
        text-align: center;
        color: #b8b8b8;
        font-size: .9rem;
        line-height: 2.5;

        &:hover {
            color: #4caf50;
        }
    }
}

.color {
    color: #4caf50;
}
</style>